<template>
  <!-- <p>{{ activeIndex }}</p>
  <p>{{ isLogin }}</p> -->

  <el-affix :offset="0" v-if="isLogin">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <el-icon><HomeFilled /></el-icon>
        Home
      </el-menu-item>
      <div class="flex-grow" ></div>
      
      <el-sub-menu index="1">
        <template #title><el-icon><User /></el-icon>{{username}}</template>
        <el-menu-item index="1-1"><el-icon><HelpFilled /></el-icon>我的记忆</el-menu-item>
        <el-menu-item index="1-4"><el-icon><Checked /></el-icon>单词抽测</el-menu-item>
        <el-menu-item index="1-2"><el-icon><InfoFilled /></el-icon>个人信息</el-menu-item>
        <el-menu-item index="1-3"><el-icon><Fold /></el-icon>退出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-affix>
  <router-view></router-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router';
  import { useStore } from 'vuex';

  const router = useRouter();
  const store = useStore();

  const activeIndex = computed(() => store.getters['getIndex']);

  const handleSelect = (key, keyPath) => {
    // console.log(key, keyPath)
    store.dispatch('changeIndex', key);

    switch(key) {
      case '0':
        router.push('/');
        break;
      case '1-1':
        router.push('/progress');
        break;
      case '1-2':
        router.push('/profiles');
        break;
      case '1-3':
        router.push('/login');
        store.commit("logout");
        break;
      case '1-4':
        router.push('/wordtest');
        break;
      default:
        router.push('/');
        break;

    }
  }

  const isLogin = computed(() => store.getters['isLogin']);
  const username = computed(() => store.state.username);

  store.dispatch('refreshInfo')
</script>

<style>
  .flex-grow {
    flex-grow: 1;
  }
  .container {
        display: flex;
        align-items: center;
        /* justify-content: center; */
        height: 25px; /*设置高度以使内容在视口中垂直居中*/
    }


  @media screen and (min-width: 320px) {
    .box-card {
      width: 80%;
      margin: auto;
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 600px) {
    .box-card {
      width: 450px;
      margin: auto;
      margin-top: 50px;
    }
  }
</style>
